import React, { useState, FC } from "react";
import { Progress } from "antd";
import { useInterval, useUnmount } from "ahooks";
import { history } from "umi";
import './index.scss'
import { Divider } from "_rc-menu@9.8.1@rc-menu";

const Dao: FC<{
    style?: any,
    width?: number,
    interval?: any,
    speed?: any,
    type?: boolean,
    next?: any
}> = ({
    style,
    width,
    interval,
    speed,
    type,
    next
}) => {
        const total: number = 100;
        const [percent, setPercent] = useState<number>(0)
        useInterval(() => {
            if (percent < total) {
                setPercent(percent + speed)
            } else {
                next()
            }
        }, interval)

        const seconds = Math.round(total / speed * interval / 1000)

        return (
            <div className="dao">
                <Progress
                    strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
                    type='circle'
                    width={width}
                    percent={percent}
                    style={{ marginRight: 8, ...style, color: '#fff' }}
                    format={type ? (percent => `${percent}%`) : () => seconds - Math.round(percent / speed * interval / 1000) + 's'}
                />
            </div>
        )
    }

Dao.defaultProps = {
    style: {
        position: 'absolute',
        top: 10,
        right: 20
    },
    width: 50,
    interval: 250,
    speed: 5,
    type: false,
    next: () => { history.push('/login') }
}

export default Dao